<!--
 * @Description: File Description
 * @Author: jundie.cheng@hand-china.com
 * @version: H3.0
 * @Date: 2023-03-29 09:54:48
 * @LastEditTime: 2023-09-13 17:34:49
-->
<template>
  <view class="filter-info-view" :class="{ disabled }">
    <view class="filter-title">{{ $t('BIWD.FilterInfo.Label') }}</view>

    <view class="filter-div flex-between">
      <view class="filter-box">
        <view
          class="expiring-soon"
          v-if="filter1Usage <= 5 && !isOffline"
          :style="{ backgroundColor: filterElementTipColorLeft }"
        >
          {{ filterElementTipLeft }}</view
        >
        <view class="box-title">{{ $t('BIWD.FilterInfo.FilterOne.Label') }}</view>
        <view class="canvas-box">
          <lineCircle
            :percent="filter1Usage"
            :stroke-color="colorLeft"
            :duration="3000"
            :stroke-width="6"
            :trail-width="6"
          >
            <view class="progress_text" :style="{ color: filterElementColorLeft }">
              <view class="progress_info"
                >{{ isOffline ? '--' : filter1Usage }}<text class="percentage-style">%</text></view
              >
              <view class="progress_info1">{{ filterElementTipLeft }}</view>
            </view>
          </lineCircle>
        </view>
        <view class="progress-des display-center">
          {{ $t('BIWD.FilterInfo.FilterOne.UseDay.Text') }}
          <text v-if="isOffline" class="blod-font offLine" style="color: #408df2">--</text>
          <text v-else class="blod-font" :style="{ color: filterElementColorLeft }">{{
            control.store.filter1Rest
          }}</text>
          {{ $t('BIWD.FilterInfo.FilterOne.UseDay.Unit.Text') }}
        </view>
      </view>
      <view class="filter-box">
        <view
          class="expiring-soon"
          v-if="filter2Usage <= 10 && !isOffline"
          :style="{ backgroundColor: filterElementTipColorRight }"
          >{{ filterElementTipRight }}</view
        >
        <view class="box-title">{{ $t('BIWD.FilterInfo.FilterTwo.Label') }}</view>
        <view class="canvas-box">
          <lineCircle
            :percent="filter2Usage"
            :stroke-color="colorRight"
            :duration="3000"
            :stroke-width="6"
            :trail-width="6"
          >
            <view class="progress_text" :style="{ color: filterElementColorRight }">
              <view class="progress_info"
                >{{ isOffline ? '--' : filter2Usage }}<text class="percentage-style">%</text></view
              >
              <view class="progress_info1">{{ filterElementTipRight }}</view>
            </view>
          </lineCircle>
        </view>
        <view class="progress-des display-center">
          {{ $t('BIWD.FilterInfo.FilterTwo.UseDay.Text') }}
          <text v-if="isOffline" class="blod-font offLine" style="color: #408df2">--</text>
          <text v-else class="blod-font" :style="{ color: filterElementColorRight }">{{
            control.store.filter2Rest
          }}</text>
          {{ $t('BIWD.FilterInfo.FilterTwo.UseDay.Unit.Text') }}
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import lineCircle from '@/common/l-circle/l-circle.vue'

import type { BIWDController } from '@/controller/BIWD/definition'
import { statusList1, statusList2 } from './filterStatusList'

const props = defineProps<{
  control: BIWDController.Control
  circleWidth: number
  disabled: boolean
  isOffline: boolean
}>()

/**
 * 滤芯1
 */

const filter1Usage = computed(() => (props.isOffline ? 100 : props.control.store.filter1Usage))
const color1Index = computed(() => {
  return statusList1.findIndex((item) => filter1Usage.value <= item.max && filter1Usage.value >= item.min)
})
const colorLeft = computed(() => {
  if (color1Index.value <= 1) {
    return statusList1[color1Index.value].color
  } else {
    return ['#5DC6FF', '#365DE6']
  }
})
const filterElementColorLeft = computed(() => statusList1[color1Index.value].color)
const filterElementTipLeft = computed(() => statusList1[color1Index.value].tip)
const filterElementTipColorLeft = computed(() => statusList1[color1Index.value].tipColor)

/**
 * 滤芯2
 */
const filter2Usage = computed(() => (props.isOffline ? 100 : props.control.store.filter2Usage))
const color2Index = computed(() => {
  return statusList2.findIndex((item) => filter2Usage.value <= item.max && filter2Usage.value >= item.min)
})
const colorRight = computed(() => {
  if (color2Index.value <= 1) {
    return statusList2[color2Index.value].color
  } else {
    return ['#5DC6FF', '#365DE6']
  }
})
const filterElementColorRight = computed(() => statusList2[color2Index.value].color)
const filterElementTipRight = computed(() => statusList2[color2Index.value].tip)
const filterElementTipColorRight = computed(() => statusList2[color2Index.value].tipColor)
</script>
<style lang="less">
.filter-info-view {
  font-family: 'PingFang SC';
  font-style: normal;
  padding: 0 32rpx;
  &.disabled {
    opacity: 0.6;
    pointer-events: none;
  }
  .flex-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .filter-title {
    font-weight: 400;
    font-size: 28rpx;
    height: 80rpx;
    line-height: 80rpx;
  }
  .filter-div {
    .filter-box {
      width: 338rpx;
      height: 372rpx;
      background-color: #f4f4f6;
      position: relative;
      box-sizing: border-box;
      padding: 24rpx;
      .expiring-soon {
        position: absolute;
        top: -12rpx;
        left: -10rpx;
        width: 86rpx;
        height: 32rpx;
        background-color: #ffaa00;
        font-weight: 600;
        font-size: 20rpx;
        color: var(--dark-color);
        text-align: center;
        line-height: 32rpx;
      }
      .box-title {
        font-weight: 600;
        font-size: 32rpx;
        line-height: 40rpx;
        color: var(--dark-color);
      }
      .canvas-box {
        width: 100%;
        height: 250rpx;
        box-sizing: border-box;
        position: relative;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        .progress_bg {
          width: 224rpx;
          height: 224rpx;
          border-radius: 50%;
          border: 20rpx solid #e9e9ed;
          position: absolute;
          box-sizing: border-box;
        }
        .progress_canvas {
          width: 224rpx;
          height: 224rpx;
          position: absolute;
        }
        .progress_text {
          position: absolute;
          margin-top: 10rpx;
          .progress_info {
            font-weight: 500;
            font-size: 72rpx;
            line-height: 40rpx;
            .percentage-style {
              font-weight: 600;
              font-size: 26rpx;
              line-height: 40rpx;
            }
          }
          .progress_info1 {
            font-weight: 400;
            font-size: 24rpx;
            opacity: 0.4;
            color: var(--dark-color);
          }
        }
      }
      .progress-des {
        width: 100%;
        font-weight: 400;
        font-size: 24rpx;
        line-height: 40rpx;
        color: var(--dark-color);
        .blod-font {
          font-weight: 500;
          font-size: 40rpx;
        }
      }
    }
  }
  .display-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .offLine {
    margin: 0 6rpx;
  }
}
</style>
